<template>
    <div class="ep-dialog-container" v-show="show">
        <div class="ep-dialog">
            <div class="title">
                东阳市影视产业人力资源预警
                <i class="el-icon-close right" style="fonts-zie:18px;cursor: pointer;" @click="close()"></i>
            </div>
            <div class="flex">
                <dialog-module-1 ref="module1" style="flex:1;margin-left:33px" :data="data.module1"></dialog-module-1>
                <dialog-module-2 ref="module2" style="flex:1;margin:0 33px" :data="data.module2"></dialog-module-2>
            </div>
            <dialog-module-3 ref="module3" style="margin:28px 33px 0 33px" :data="data.module3"></dialog-module-3>
        </div>
    </div>
</template>
<script>
import DialogModule1 from './dialog/DialogModule1.vue'
import DialogModule2 from './dialog/DialogModule2.vue'
import DialogModule3 from './dialog/DialogModule3.vue'
export default {
    model: {
        prop: 'show',
        event: 'update'
    },
    props: {
        show: Boolean,
        data: Object
    },
    components: {
        DialogModule1,
        DialogModule2,
        DialogModule3
    },
    data(){
        return {}
    },
    watch: {
        show: {
            handler() {
                if (!this.show) return;
                this.$nextTick(() => {
                    this.$refs.module1.update()
                    this.$refs.module2.update()
                    this.$refs.module3.update()
                })

            },
            immediate: true
        }
    },
    methods: {
        close() {
            this.$emit("update:show", false)
        }
    }
}
</script>
<style lang="less" scoped>
.ep-dialog-container {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    transition: display 2s;
    width: 100%;
    height: 1080px;
    z-index: 999;
}
.title {
    font-size: 38px;
    font-family: FZDBSJW--GB1-0;
    line-height: 46px;
    color: #FFFFFF;
    position: relative;
    padding: 22px 0;

    .right {
        right: 34px;
        top: 34px;
        position: absolute;
    }
}
.ep-dialog {
    width: 62%;
    height: 956px;
    position: absolute;
    left: 19%;
    top: 42px;
    background: #032040;
}
.flex {
    display: flex;
}
</style>
